<!--
 * @Author: MuQuanyu(MQy)
 * @Date: 2025-08-30 14:30:41
 * @LastEditTime: 2025-10-11 09:21:51
 * @email: muquanyu@outlook.com
-->
<template>
  <div class="login-page" v-show="!authStore.isLogin">
    <!-- 登录页顶部菜单 -->
    <!-- @mouseenter="moveLeft = true" @mouseleave="moveLeft = false" -->
    <!-- :style="{ right: moveLeft ? '5px' : '-100px' }" -->
    <div class="login-menu" style="right: 5px;">
      <LoginMenu></LoginMenu>
    </div>
    <!-- 居中 -->
    <div class="center-login-layout" v-if="screenSize == 'mobile' || sysStore.loginLayout == 0">
      <div class="login-bg-box">
        <img style="width: 50%; margin-top: 50px;" src="@/assets/svg/login_bg.svg"></img>
      </div>
      <el-card class="login-form-box">
        <LoginBox :validCodeData="validCodeData" @login-user-pwd="loginUserPwd"
         @refresh-code-img="refreshCodeImg" @register-user-pwd="registerUserPwd"></LoginBox>
      </el-card>
    </div>
    <div class="copy-right-box" v-if="screenSize == 'mobile' || sysStore.loginLayout == 0">
      Copyright&nbsp;&nbsp;<i class="iconfont icon-banquan-xian"></i>&nbsp;2025
      &nbsp;<span class="crb-link-txt" @click="hrefYuAdmin()">Yu-admin</span>
    </div>
    <!-- 左侧 -->
    <div class="left-login-layout" v-if="screenSize == 'pc' && sysStore.loginLayout == 1">
      <el-card class="login-form-box">
        <LoginBox :validCodeData="validCodeData" ></LoginBox>
      </el-card>
      <div class="login-bg-box">
        <img style="width: 50%; " src="@/assets/svg/login_bg.svg"></img>
        <div class="lr-copy-right-box">
          Copyright&nbsp;&nbsp;<i class="iconfont icon-banquan-xian"></i>&nbsp;2025
          &nbsp;<span class="crb-link-txt" @click="hrefYuAdmin()">Yu-admin</span>
        </div>
      </div>
    </div>
    <!-- 右侧 -->
    <div class="left-login-layout" v-if="screenSize == 'pc' && sysStore.loginLayout == 2">
      <div class="login-bg-box">
        <img style="width: 50%; " src="@/assets/svg/login_bg.svg"></img>
        <div class="lr-copy-right-box">
          Copyright&nbsp;&nbsp;<i class="iconfont icon-banquan-xian"></i>&nbsp;2025
          &nbsp;<span class="crb-link-txt" @click="hrefYuAdmin()">Yu-admin</span>
        </div>
      </div>
      <el-card class="login-form-box">
        <LoginBox :validCodeData="validCodeData"></LoginBox>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import LoginMenu from "./components/LoginMenu.vue";
import LoginBox from "./components/LoginBox.vue";
import { useAuthStore, useSysStore } from "@/store";
import { GetGraphCode, LoginUserPwd, RegisterUserPwd } from "@/api/sys/user"; // 获取验证码
import type { RegisterForm, UserPwdForm } from "./types";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import emitter from "@/utils/bus";
const sysStore = useSysStore();
const moveLeft = ref(false);
const screenSize = ref('pc')
const hrefYuAdmin = () => {
  window.open('https://gitee.com/YuCodesSpace/yu-admin', '_blank')
}
const authStore = useAuthStore()
const router = useRouter()
//#region 登录部分
const loginUserPwd = async (userPwdForm: UserPwdForm) => {
  let res = await LoginUserPwd({
    username: userPwdForm.username,
    password: userPwdForm.password,
    gorMAuthCode: userPwdForm.gorMAuthCode
  }, {
    validCode: validCodeData.value.validCode,
    authCode: userPwdForm.gorMAuthCode,
  })

  if (res.code == 200) {
    // 保存相关验证信息
    authStore.setAccessToken(res.data.accessToken);
    authStore.setRefreshToken(res.data.refreshToken);
    authStore.setTokenTimes(res.data.tokenTimes);

    router.replace('/')
  }else{
    ElMessage.error(res.msg + "：" + res.data)
    await refreshCodeImg()
  }
}

// 刷新图形验证码
const refreshCodeImg = async () => {
  let res = await GetGraphCode();
  if (res.code == 200) {
    validCodeData.value = res.data
    // validCodeData.value.base64 = 'data:image/png;base64,' + validCodeData.value.base64
    validCodeData.value.base64 = validCodeData.value.base64
  }
}

// 注册账号密码
const registerUserPwd = async (registerForm: RegisterForm) => {
  let res = await RegisterUserPwd({
    username: registerForm.username,
    password: registerForm.password,
    rePassword: registerForm.rePassword,
    gorMAuthCode:  registerForm.gorMAuthCode
  }, {
     validCode: validCodeData.value.validCode,
    authCode: registerForm.gorMAuthCode,
  })
  if(res.code == 200) {
    ElMessage.success("注册成功")
    emitter.emit("onHandleRegisterSuccess")
  }else{
    ElMessage.error(res.msg+ "："+ res.data)
    await refreshCodeImg()
  }
}
//#endregion



// 监听窗口变化
const handleResize = () => {
  const width = window.innerWidth;
  if (width >= 768) screenSize.value = 'pc';
  else screenSize.value = 'mobile';
};
const validCodeData = ref<any>()
onMounted(async () => {
  window.addEventListener('resize', handleResize);
  handleResize(); // 初始化执行一次
  sysStore.setIsProcess(true);
  sysStore.setIsLoading(true);
  let res = await GetGraphCode();
  if (res.code == 200) {
    validCodeData.value = res.data
    // validCodeData.value.base64 = 'data:image/png;base64,' + validCodeData.value.base64
    validCodeData.value.base64 = validCodeData.value.base64
  }
  sysStore.setProcessFinish(true);
  sysStore.setIsLoading(false);
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});
</script>

<style lang="scss" scoped>
.login-menu {
  position: fixed;
  transition: right 0.3s ease;
  top: 5px;
}

.login-page {
  background: var(--yu-bg-color);
  height: 100vh;
}

.center-login-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100% - 50px);
  width: 100%;

  .login-bg-box {
    display: none;

    @media (max-width: 768px) {
      display: flex;
      max-height: 50%;
      align-items: center;
      justify-content: center;
    }
  }

  @media (max-width: 768px) {
    flex-direction: column;
    justify-content: space-between;
  }

  :deep(.el-card__body) {
    padding: 40px;
  }

  .login-form-box {
    background: var(--yu-div-bg1);
    width: 500px;
    overflow-y: auto;

    @media (max-width: 768px) {
      width: 100%;

      :deep(.el-card__body) {
        padding: 20px;
      }
    }


  }
}

.left-login-layout {
  display: flex;
  height: 100%;
  width: 100%;

  @media (max-width: 768px) {
    flex-direction: column;
  }

  .login-form-box {
    width: 680px;
    flex-shrink: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;


    :deep(.el-card__body) {
      padding: 120px !important;
      width: 100%;
    }


  }

  .login-bg-box {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    .crb-link-txt:hover {
      cursor: pointer;
      text-decoration: underline;
    }


  }
}

.copy-right-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;

  .crb-link-txt {
    cursor: pointer;
  }

  .crb-link-txt:hover {
    text-decoration: underline;
  }
}

.lr-copy-right-box {
  position: absolute;
  bottom: 30px;

  @media (max-width : 900px) {
    display: none;
  }
}
</style>
